<template>
	<view>
		<view class="box-ly-zp" :style="style_box">
			<view :animation="animationData" class="cs-ct" :style="style_wh">
				<view class="cs-line">
					<view class="cs-litem" v-for="(item,index) in awardsList" :key="index"
						:style="[{transform:'rotate('+item.lineTurn+')'},{'background-color':themeColor},{left:(width/2) +'rpx'},{height:(height/2) +'rpx'},{'-webkit-transform-origin': '50% ' +(height/2) +'rpx'},{'transform-origin': '50% ' +(height/2) +'rpx'}]">
					</view>
				</view>
				<view class="cs-list">
					<view class="cs-item" :style="[{color: themeColor }]" v-for="(iteml,index2) in awardsList"
						:key="index2">
						<view class="cs-item-text"
							:style="[{transform:'rotate('+iteml.turn+')'},{'-webkit-transform-origin': '50% ' +(height/2) +'rpx'},{'transform-origin': '50% ' +(height/2) +'rpx'}]">
							<text class="txt">{{iteml.name}}</text>
							<image lazy-load="true" class="cs-item-text-img" :src="iteml.img"
								@tap="toDetailPage({index: index2})"></image>
						</view>
					</view>
				</view>
			</view>
			<view>
				<image @tap="onStartGetPrizeMsg" class="cs-btn"
					:style="[{left:((width/2)-60) +'rpx'},{top:((height/2)-80) +'rpx'}]" v-bind:class="btnDisabled"
					src="https://wx.2024csnl.com/static/mine/newAnniu.png"></image>
			</view>
			<!-- <view @tap="onStartGetPrizeMsg" class="cs-btn"
				:style="[{left:((width/2)-40) +'rpx'},{top:((height/2)-40) +'rpx'}]" v-bind:class="btnDisabled">开始
			</view>
			<view class="cs-btn-table" v-if="chance_num>=0"
				:style="[{left:((width/2)-50) +'rpx'},{top:((height/2)+50) +'rpx'},{color: themeColor }]">
				剩余{{chance_num}}次</view> -->
			<view class="cs-btn-table" v-if="chance_num>=0"
				:style="[{left:((width/2)-50) +'rpx'},{top:((height/2)+80) +'rpx'},{color: themeColor }]">
				剩余{{chance_num}}次</view>
		</view>

	</view>
</template>

<script>
	import {
		startGetPrizeMsg
	} from "../../api/index.js"
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			// 抽奖id
			drawId: {
				type: String,
				default: ''
			},

			height: {
				type: Number,
				default: 700
			},
			width: {
				type: Number,
				default: 700
			},
			themeColor: {
				type: String,
				default: '#E82E04',
			},
			chance_num_init: {
				type: [Number],
				default: 0
			},
			zhuan: {
				type: [Number],
				default: 0
			},
			//停留位置
			stay_index: {
				type: Number,
				default: 1
			},
			drowId: {
				type: [Number, String],
			},
			pageType: {
				type: Number,
				default: 1
			}

		},
		data() {
			return {
				chance: true,
				awardsList: {},
				animationData: {},
				btnDisabled: '',
				chance_num: 0,
				draId: null,
				isZhuan: 1,
			};
		},
		watch: {
			list() {
				this.init()
			},
			chance_num_init(e) {
				this.chance_num = e;
			},
			zhuan(e) {
				console.log(e, "zhuan----")
				if (e == 1) {
					this.onStartGetPrizeMsg()
				}

			},

		},
		created() {
			this.init();
			this.chance_num = this.chance_num_init;
			this.isZhuan = this.zhuan

			// if(this.isZhuan==1){
			// 	console.log(this.isZhuan,"zhuan--222--")
			// 	this.onStartGetPrizeMsg()
			// }
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = 'https://wx.2024csnl.com/static/music.mp3';
		},
		computed: {
			style_box() {
				let that = this;
				var height = parseInt(that.height);
				var width = parseInt(that.width);
				var style = '';
				if (height > 0) {
					style = `height:${height}rpx;`;
				}
				if (width > 0) {
					style += `width:${width}rpx;`;
				}
				style += `border: 8rpx solid ${that.themeColor};`;
				return style;
			},
			style_wh() {
				let that = this;
				var height = parseInt(that.height);
				var width = parseInt(that.width);
				var style = '';
				if (height > 0) {
					style = `height:${height}rpx;`;
				}
				if (width > 0) {
					style += `width:${width}rpx;`;
				}
				return style;
			},

		},

		beforeDestroy() {
			this.onStopMusic()
			console.log('销毁前')
		},
		methods: {
			// 暂停音乐
			onStopMusic() {
				this.innerAudioContext.pause();
			},
			// 播放音乐
			playMusic() {
				this.innerAudioContext.play()
			},
			// 获取抽奖结果
			async onStartGetPrizeMsg() {
				// console.log(this.drowId, "8d8", this.pageType)
				if (this.chance_num == 0) {
					this.showToast('暂无抽奖次数')
					return
				}

				const res = await startGetPrizeMsg('s=/ApiChoujiang/index', {
					type: this.pageType,
					id: this.drowId,
					op: 'getjx'
				})
				// console.log(res, "******")
				const {
					status,
					msg,
					data
				} = res.data
				if (status == 1) {
					this.playMusic()
					this.playReward(data.jxindex, data.jx, data.text)
				} else {
					this.showToast(msg)
				}
			},
			modal(type, text) {
				if (type == 0) {
					uni.$emit('result', '很遗憾暂未中奖')
				} else {
					uni.$emit('result', `恭喜抽中${text}`)
				}
				// uni.showModal({
				// 	title: type == 0 ? '很遗憾' : '恭喜你',
				// 	content: type != 0 ? `抽中${text}` : '暂未中奖',
				// 	showCancel: false,
				// 	// success:(res)=> {
				// 	// 	if (res.confirm) {
				// 	// 		// let that=this
				// 	// 		// uni.$emit('result',true)

				// 	// 	} 
				// 	// }
				// });
				this.onStopMusic()
			},
			//发起抽奖
			playReward(idx, isRate, text) {
				// isRate不为0都是中奖
				let that = this;
				//中奖index  
				var awardsNum = that.list;
				var awardIndex = idx
				var runNum = 8; //旋转8周  
				var duration = 4000; //时长  
				// 旋转角度  
				this.runDeg = this.runDeg || 0;
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum
					.length))
				//创建动画  
				var animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease'
				})
				animationRun.rotate(that.runDeg).step();
				that.animationData = animationRun.export();
				that.btnDisabled = 'disabled';
				// 中奖提示  
				if (that.chance_num != -1) {
					that.chance_num = that.chance_num - 1; //更新剩余次数
				}
				// this.onStopMusic()

				setTimeout(function() {
					this.modal(isRate, text)

				}.bind(that), duration);
				that.btnDisabled = '';
				setTimeout(function() {
					this.$emit('result', true);

				}.bind(that), duration);

			},

			//画抽奖圆盘  
			init() {
				var awards = this.list;
				var awardsList = [];
				var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  

				// 奖项列表  
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg',
						lineTurn: i * turnNum + turnNum / 2 + 'deg',
						name: awards[i].name,
						img: awards[i].img,
					});
				}

				this.btnDisabled = this.chance ? '' : 'disabled';
				this.awardsList = awardsList;
			},


			//详情页
			toDetailPage(item) {
				let that = this;
				let list = that.awardsList;
				let index = item.index;
				let data = {
					curIndex: index,
					item: list[index],
					list: list
				};
				this.$emit('toDetailPage', data);
			},
		}

	}
</script>

<style>
	.txt {
		padding-top: 10upx;
		padding-bottom: 10upx;
	}

	/* 转盘 */
	.box-ly-zp {
		margin: 0 auto;
		position: relative;
		border-radius: 50%;
		/* box-shadow: 0 10upx 30upx #333, 0 0 10upx #000; */
		margin-top: 20rpx;
	}

	.cs-ct {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		border-radius: inherit;
		background-clip: padding-box;
	}

	.cs-element {
		position: relative;
		z-index: 1;
		width: inherit;
		height: inherit;
		border-radius: 50%;
	}

	.cs-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.cs-item {

		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		font-weight: bold;
		text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6);
		/* -webkit-clip-path: inset(25% 0 round 0 25%) */
	}

	.cs-item-text {
		/* 	background: rebeccapurple;
		border-radius: 50%; */

		position: relative;
		display: block;
		padding-top: 20upx;
		margin: 0 auto;
		text-align: center;

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cs-item-text text {
		font-size: 30upx;
	}

	.cs-item-text-img {
		width: 60upx;
		height: 60upx;

		border-radius: 50%;
	}

	/* 分隔线 */
	.cs-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.cs-litem {
		position: absolute;

		top: 0;
		width: 3upx;

		overflow: hidden;

	}

	/**  
* 抽奖按钮  
*/
	.cs-btn {
		position: absolute;
		/* background-color: #e44025; */
		z-index: 400;
		width: 140upx;
		height: 160upx;
		border-radius: 50%;
		/* color: #f4e9cc; */
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		/* text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); */
		text-decoration: none;
	}

	/* 	.cs-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 12upx;
		top: -44upx;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 30upx;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #e44025;
	} */

	.cs-btn.disabled {
		pointer-events: none;
		/* background: #b07a7b; */
		color: #ccc;
	}

	.cs-btn.disabled::after {
		/* border-bottom-color: #b07a7b; */
	}

	.cs-btn-table {
		z-index: 400;
		width: 120upx;
		text-align: center;
		position: absolute;

		font-size: 26upx;
		background-color: #FFFFFF;
		opacity: 0.9;
	}
</style>